<template>
	<view class="return-refund-container">
		<!-- 商品信息 -->
		<view class="product-info">
			<view class="product-card">
				<view class="image-container">
					<image class="product-image" :src="order.orderSpeciDetailVoList[0].image | avatarUrlFind('1')" mode="aspectFill"></image>
					<view v-if="order.isPoints==='1'" class="points-order-tag">积分订单</view>
				</view>
				<view class="product-details">
					<view class="product-name">{{ order.orderSpeciDetailVoList[0].drugName }}</view>
					<view class="product-specs">{{ order.orderSpeciDetailVoList[0].speciName }}</view>
					<view class="product-price">￥{{ order.payableAmount }}</view>
				</view>
			</view>
		</view>
		
		<!-- 申请信息卡片 -->
		<view class="apply-info-card">
			<!-- 申请类型 -->
			<view class="form-item form-item-inline">
				<view class="form-label">申请类型</view>
				<view class="form-value-select" @click="showTypePicker">
					<text>{{ typeText || '点击选择申请类型' }}</text>
					<text class="iconfont icon-arrow-right text-black">></text>
				</view>
			</view>
			
			<!-- 收货状态 - 仅在不是退货退款时显示 -->
			<view class="form-item form-item-inline" v-if="applicationType !== 'return_refund'">
				<view class="form-label">收货状态</view>
				<view class="form-value-select" @click="showReasonPicker">
					<text>{{ selectedReason || '点击选择收货状态' }}</text>
					<text class="iconfont icon-arrow-right text-black">></text>
				</view>
			</view>
			
			<!-- 申请原因 -->
			<view class="form-item form-item-inline">
				<view class="form-label">申请原因</view>
				<view class="form-value-select" @click="showReasonDetailPicker">
					<text>{{ selectedReasonDetail || '点击选择申请原因' }}</text>
					<text class="iconfont icon-arrow-right text-black">></text>
				</view>
			</view>
		</view>
		
		<!-- 退货信息卡片 -->
		<view class="refund-info-card">
			<!-- 退货数量：标题左对齐，选择器右对齐 -->
			<view class="form-item form-item-horizontal">
				<view class="form-label">退货数量（共{{ totalQuantity }}申请{{ refundQuantity }}件）</view>
				<view class="quantity-control">
					<text class="quantity-btn" @click="decreaseQuantity">-</text>
					<text class="quantity-value">{{ refundQuantity }}</text>
					<text class="quantity-btn" @click="increaseQuantity">+</text>
				</view>
			</view>
			
			<!-- 退款金额：标题左对齐，金额右对齐 -->
			<view class="form-item form-item-horizontal">
				<view class="form-label">申请金额</view>
				<view class="form-value">￥{{ refundAmount }}</view>
			</view>
		</view>
		
		<!-- 申请说明 -->
		<view class="description-section">
			<view class="section-title">申请说明</view>
			<textarea 
				class="description-textarea" 
				v-model="description"
				placeholder="请您详细说明申请说明"
				maxlength="200"
			></textarea>
			<view class="char-count">{{ description.length }}/200</view>
		</view>
		
		<!-- 退货方式（仅退货退款显示） -->
		<view class="return-method-section" v-if="applicationType === 'return_refund'">
			<view class="method-item">
				<view class="method-label">退货方式</view>
				<view class="method-content">
					<text class="method-name">上门取件</text>
					<text class="method-desc">无需打包，等快递员上门取件即可</text>
				</view>
			</view>
			
			<view class="address-item" @click="selectAddress">
				<view class="address-label">我的地址</view>
				<view class="address-content">
					<view v-if="selectedAddress" class="address-info">
						<view class="address-detail">{{ selectedAddress.detail }}</view>
						<view class="address-contact">
							{{ selectedAddress.realName }} {{ selectedAddress.phone }}
						</view>
					</view>
					<view v-else class="add-address-text">点击选择收货地址</view>
				</view>
				<view class="address-arrow">
					<text>›</text>
				</view>
			</view>
		</view>
		
		<!-- 底部提交区域 -->
		<view class="submit-section">
			<view class="total-info">
				<text>共1件，退款总金额</text>
				<text class="total-amount">￥{{ refundAmount }}</text>
			</view>
			<button class="submit-btn" @click="submitApplication">提交申请</button>
			<view class="submit-tip">"不会操作点击下方400电话"联系客服代办"</view>
			<view class="service-phone">
				<text class="iconfont icon-phone"></text>
				<text>400-698-9967</text>
			</view>
		</view>
		
		<!-- 原因选择弹窗 -->
		<u-picker 
			:show="showReasonPickerModal" 
			:columns="reasonColumns" 
			@confirm="onReasonConfirm"
			@cancel="showReasonPickerModal = false"
		></u-picker>
		
		<!-- 申请类型选择弹窗 -->
		<u-picker 
			:show="showTypePickerModal" 
			:columns="typeColumns" 
			@confirm="onTypeConfirm"
			@cancel="showTypePickerModal = false"
		></u-picker>
		
		<!-- 申请原因详细选择弹窗 -->
		<u-picker 
			:show="showReasonDetailPickerModal" 
			:columns="reasonDetailColumns" 
			@confirm="onReasonDetailConfirm"
			@cancel="showReasonDetailPickerModal = false"
		></u-picker>
	</view>
</template>

<script>
	import { refundApply } from '@/api/order'
	export default {
		data() {
			return {
				order: {},
				applicationType: '', // 'refund_only' 或 'return_refund'
				typeText: '',
				selectedReason: '',
				selectedReasonDetail: '',
				refundQuantity: 1,
				totalQuantity: 1,
				refundAmount: '398.00',
				description: '',
				showTypePickerModal: false,
				showReasonPickerModal: false,
				showReasonDetailPickerModal: false,
				typeColumns: [
					['我要退款（无需退货）', '退货退款']
				],
				reasonColumns: [
					['已收到货', '未收到货']
				],
				reasonDetailColumns: [
					[
						'商品成分描述不符',
						'颜色款式包装描述不符',
						'收到商品少件',
						'空包裹',
						'发错货',
						'其他原因'
					]
				],
				// 地址相关数据
				selectedAddress: {}, // 选中的地址信息
				addressList: [] // 地址列表
			}
		},
		onLoad(options) {
			if (options.order) {
				this.order = JSON.parse(decodeURIComponent(options.order));
			}
			console.log(this.order)
			if (options.type) {
				this.applicationType = options.type;
				this.typeText = options.type === 'refund_only' ? '我要退款（无需退货）' : '退货退款';
			}
			if (options.title) {
				uni.setNavigationBarTitle({
					title: decodeURIComponent(options.title)
				});
			}
			
			// 初始化数据
			if (this.order.orderSpeciDetailVoList && this.order.orderSpeciDetailVoList.length > 0) {
				this.totalQuantity = this.order.totalNum;
				this.refundAmount = this.order.payableAmount;
			}
			
			// 加载地址列表
			this.loadAddressList();
		},
		mounted() {
			// 监听地址选择事件
			uni.$on('addressSelected', this.handleAddressSelected);
		},
		beforeDestroy() {
			// 移除事件监听
			uni.$off('addressSelected', this.handleAddressSelected);
		},
		methods: {
			// 显示申请类型选择器
			showTypePicker() {
				this.showTypePickerModal = true;
			},
			
			// 显示收货状态选择器
			showReasonPicker() {
				this.showReasonPickerModal = true;
			},
			
			// 显示申请原因选择器
			showReasonDetailPicker() {
				this.showReasonDetailPickerModal = true;
			},
			
			// 确认申请类型选择
			onTypeConfirm(e) {
				this.typeText = e.value[0];
				this.applicationType = e.value[0] === '我要退款（无需退货）' ? 'refund_only' : 'return_refund';
				this.showTypePickerModal = false;
			},
			
			// 确认收货状态选择
			onReasonConfirm(e) {
				this.selectedReason = e.value[0];
				this.showReasonPickerModal = false;
			},
			
			// 确认申请原因选择
			onReasonDetailConfirm(e) {
				this.selectedReasonDetail = e.value[0];
				this.showReasonDetailPickerModal = false;
			},
			
			// 减少退货数量
			decreaseQuantity() {
				if (this.refundQuantity > 1) {
					this.refundQuantity--;
					this.calculateRefundAmount();
				}
			},
			
			// 增加退货数量
			increaseQuantity() {
				if (this.refundQuantity < this.totalQuantity) {
					this.refundQuantity++;
					this.calculateRefundAmount();
				}
			},
			
			// 计算退款金额
			calculateRefundAmount() {
				const unitPrice = parseFloat(this.order.payableAmount) / this.totalQuantity;
				this.refundAmount = (unitPrice * this.refundQuantity).toFixed(2);
			},
			
			// 提交申请
			submitApplication() {
				// 验证必填项
				// 收货状态只在仅退款时校验
				if (this.applicationType === 'refund_only' && !this.selectedReason) {
					uni.showToast({
						title: '请选择收货状态',
						icon: 'none'
					});
					return;
				}
				
				// 退货退款时校验地址必选
				if (this.applicationType === 'return_refund' && (!this.selectedAddress || !this.selectedAddress.detail)) {
					uni.showToast({
						title: '请选择退货地址',
						icon: 'none'
					});
					return;
				}
				
				if (!this.selectedReasonDetail) {
					uni.showToast({
						title: '请选择申请原因',
						icon: 'none'
					});
					return;
				}

				const order={}
				order.id=this.order.id
				order.orderStatus="3"
				order.backStatus="0"
				order.backApplyWay="1"
				if(this.applicationType === 'refund_only'){
					order.backWay="0"
				}else{
					order.backWay="1"
				}
				order.backApplyTime=new Date().getTime()
				order.totalNum=this.order.totalNum
				order.backAmount= this.refundAmount
				order.applyInstructions=this.description
				order.backReason=this.selectedReasonDetail


					// 退货退款时校验地址必选
				if (this.applicationType === 'return_refund') {
					const orderAddress={}
					orderAddress.refundUserAddress=this.selectedAddress.detail
					orderAddress.refundUserName=this.selectedAddress.realName
					orderAddress.refundUserPhone=this.selectedAddress.phone
					orderAddress.returnProvince=this.selectedAddress.province
					orderAddress.returnCity=this.selectedAddress.city
					orderAddress.returnCounty=this.selectedAddress.district
					orderAddress.orderId=this.order.id
					orderAddress.userId=this.order.userId
					order.orderAddress=orderAddress
				}
				
				
				console.log('提交申请数据：', order);
				
				refundApply(order).then(res=>{
					console.log(res)
				})
				// // 这里应该调用API提交申请
				uni.showToast({
					title: '申请已提交',
					icon: 'success'
				});
				
				// // 延迟返回
				setTimeout(() => {
					uni.reLaunch({
						url: '/subPackage_1/pages/order/order-list'
					})
				}, 1500);
			},
			
			// 地址选择相关方法
			selectAddress() {
				// 跳转到地址选择页面
				uni.navigateTo({
					url: '/subPackage_1/pages/mine/address/address-list?selectMode=true'
				});
			},
			
			// 加载地址列表
			async loadAddressList() {
				if (this.order.addressVo) {
					this.selectedAddress = {
						detail: this.order.addressVo.receiveUserAddress,
						realName: this.order.addressVo.receiveUserName,
						phone: this.order.addressVo.receiveUserPhone,
						province: this.order.addressVo.receiveProvince,
						city: this.order.addressVo.receiveCity,
						district: this.order.addressVo.receiveCounty
					};
				}
			},
			
			// 处理地址选择回调
			handleAddressSelected(address) {
				console.log('address', address)
				this.selectedAddress = address;
				uni.showToast({
					title: '地址选择成功',
					icon: 'success'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.return-refund-container {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding-bottom: 200rpx;
	}
	
	// 商品信息
	.product-info {
		background-color: #fff;
		
		.product-card {
			padding: 32rpx;
			display: flex;
			align-items: flex-start;
			
			.image-container {
				position: relative;
				margin-right: 24rpx;
				flex-shrink: 0;
			}
			
			.product-image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 12rpx;
			}

			.points-order-tag {
				position: absolute;
				top: 0rpx;
				left: 0rpx;
				background-color: #FFCC00;
				color: #fff;
				font-size: 20rpx;
				padding: 4rpx 8rpx;
				border-bottom-right-radius: 12rpx;
				line-height: 1.2;
				z-index: 1;
			}
			
			.product-details {
				flex: 1;
				
				.product-name {
					font-size: 28rpx;
					color: #333;
					line-height: 40rpx;
					margin-bottom: 12rpx;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
				}
				
				.product-specs {
					font-size: 24rpx;
					color: #999;
					margin-bottom: 12rpx;
				}
				
				.product-price {
					font-size: 32rpx;
					color: #ff6b35;
					font-weight: 600;
					margin-bottom: 8rpx;
				}
				
				.product-status {
					font-size: 24rpx;
					color: #666;
				}
			}
		}
	}
	
	// 申请信息卡片
	.apply-info-card {
		margin-top: 20rpx;
		background-color: #fff;
		margin-left: 20rpx;
		margin-right: 20rpx;
		border-radius: 20rpx;
		
		.form-item {
			padding: 32rpx;
			border-bottom: 1rpx solid #f0f0f0;
			
			&:last-child {
				border-bottom: none;
			}
			
			.form-label {
				font-size: 28rpx;
				color: #999999;
				margin-bottom: 16rpx;
			}
			
			.form-value {
				font-size: 28rpx;
				color: #666;
			}
			
			.form-value-select {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #666;
				
				text {
					flex: 2;
					text-align: center;
					margin: 0 20rpx;
				}
				
				.iconfont {
					font-size: 24rpx;
					color: #080808;
					margin-left: auto;
				}
			}
		}
		
		// 同行显示的表单项
		.form-item-inline {
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.form-label {
				margin-bottom: 0;
				flex-shrink: 0;
				margin-right: 20rpx;
				width: 140rpx; // 固定标签宽度，给文本更多空间
			}
			
			.form-value-select {
				flex: 2; // 增加弹性比例，给文本更多空间
				display: flex;
				align-items: center;
				justify-content: flex-end;
				
				text {
					text-align: right;
					margin: 0;
					margin-right: 10rpx;
					max-width: calc(100% - 40rpx); // 预留图标空间
					white-space: nowrap; // 不换行
					// 移除省略号相关样式，让文本完整显示
				}
				
				.iconfont {
					flex-shrink: 0; // 图标不收缩
					font-size: 24rpx;
					color: #ccc;
				}
			}
		}
	}
	
	// 退货信息卡片
	.refund-info-card {
		margin-top: 20rpx;
		background-color: #fff;
		margin-left: 20rpx;
		margin-right: 20rpx;
		border-radius: 20rpx;
		
		.form-item {
			padding: 32rpx;
			border-bottom: 1rpx solid #f0f0f0;
			
			&:last-child {
				border-bottom: none;
			}
			
			.form-label {
				font-size: 28rpx;
				color: #333;
				margin-bottom: 16rpx;
			}
			
			.form-value {
				font-size: 28rpx;
				color: #666;
			}
		}
		
		// 水平布局：标题左对齐，内容右对齐
		.form-item-horizontal {
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.form-label {
				flex-shrink: 0;
				margin-bottom: 0;
				margin-right: 20rpx;
				text-align: left;
			}
			
			.form-value {
				flex-shrink: 0;
				text-align: right;
				font-size: 32rpx;
				font-weight: bold;
				color: #ff6b35;
			}
			
			.quantity-control {
				flex-shrink: 0;
				display: flex;
				align-items: center;
				
				.quantity-btn {
					width: 60rpx;
					height: 60rpx;
					border: 1rpx solid #ddd;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 32rpx;
					color: #666;
					
					&:first-child {
						border-radius: 8rpx 0 0 8rpx;
					}
					
					&:last-child {
						border-radius: 0 8rpx 8rpx 0;
					}
				}
				
				.quantity-value {
					width: 100rpx;
					height: 60rpx;
					border-top: 1rpx solid #ddd;
					border-bottom: 1rpx solid #ddd;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 28rpx;
					color: #333;
					background-color: #fff;
				}
			}
		}
	}
	
	// 申请说明区域
	.description-section {
		margin-top: 20rpx;
		background-color: #fff;
		padding: 32rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		border-radius: 20rpx;
		
		.section-title {
			font-size: 28rpx;
			color: #333;
			margin-bottom: 20rpx;
		}
		
		.description-textarea {
			width: 100%;
			min-height: 200rpx;
			padding: 20rpx;
			border: 1rpx solid #f0f0f0;
			border-radius: 8rpx;
			font-size: 28rpx;
			color: #333;
			background-color: #fafafa;
			box-sizing: border-box;
		}
		
		.char-count {
			text-align: right;
			font-size: 24rpx;
			color: #999;
			margin-top: 12rpx;
		}
	}
	
	// 退货方式区域
	.return-method-section {
		margin-top: 20rpx;
		background-color: #fff;
		padding: 32rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		border-radius: 20rpx;
		margin-bottom: 200rpx;
		
		.method-item {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			margin-bottom: 32rpx;
		}
		
		.method-label {
			flex-shrink: 0;
			font-size: 28rpx;
			color: #333;
			margin-right: 20rpx;
		}
		
		.method-content {
			flex: 1;
			text-align: right;
		}
		
		.method-name {
			font-size: 28rpx;
			color: #333;
			display: block;
			margin-bottom: 4rpx;
		}
		
		.method-desc {
			font-size: 24rpx;
			color: #999;
			display: block;
		}
		
		.address-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 32rpx;
			padding: 20rpx 0;
		}
		
		.address-label {
			flex-shrink: 0;
			font-size: 28rpx;
			color: #333;
			margin-right: 20rpx;
		}
		
		.address-content {
			flex: 1;
			text-align: right;
			
			.address-info {
				.address-detail {
					font-size: 28rpx;
					color: #333;
					margin-bottom: 4rpx;
				}
				
				.address-contact {
					font-size: 24rpx;
					color: #666;
				}
			}
			
			.add-address-text {
				font-size: 28rpx;
				color: #666;
			}
		}
		
		.address-arrow {
			flex-shrink: 0;
			color: #999;
			font-size: 32rpx;
			margin-left: 12rpx;
		}
	}
	
	// 底部提交区域
	.submit-section {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 32rpx;
		border-top: 1rpx solid #f0f0f0;
		
		.total-info {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 24rpx;
			
			text:first-child {
				font-size: 28rpx;
				color: #333;
			}
			
			.total-amount {
				font-size: 36rpx;
				color: #ff6b35;
				font-weight: 600;
			}
		}
		
		.submit-btn {
			width: 100%;
			height: 88rpx;
			background: linear-gradient(135deg, #4CAF50, #45a049);
			border: none;
			border-radius: 44rpx;
			color: #fff;
			font-size: 32rpx;
			font-weight: 500;
			margin-bottom: 16rpx;
		}
		
		.submit-tip {
			text-align: center;
			font-size: 24rpx;
			color: #999;
			margin-bottom: 12rpx;
		}
		
		.service-phone {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 26rpx;
			color: #007AFF;
			
			.iconfont {
				margin-right: 8rpx;
			}
		}
	}
</style>
